<template>
	<view class="container">
		<scroll-view scroll-x="true" show-scrollbar='true'>
			<view class="row">
				<view @click="changeTab(item.name,item.id)" class="tab" v-for="(item,index) in tabList" :key="index">
					<view :class="{active:className == item.name}">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
		<view v-if="cateList.length == 0" class="none">暂无数据</view>
		<view v-else class="content">
			<!-- <swiper class="swiper"> -->
			<!-- <swiper-item > -->
			<view class="box" v-for="(item2,index2) in cateList" :key="index2">
				<view class="top">
					<view class="left">
						<image :src="item2.logo" mode=""></image>
					</view>
					<view class="right">
						<view class="name">{{item2.title}}</view>
						<view class="time">{{item2.publishtime}}</view>
					</view>
				</view>
				<image @click="goDetil(item2.id,item2.title)" class="al" :src="item2.image" mode=""></image>
			</view>
			<!-- </swiper-item> -->
			<!-- </swiper> -->
			<view v-if="btm == true" class="bottom">我是有底线的~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				tabList: [],
				fenleiId: '',
				cateList: [],
				className: '',
				btm: false,
				logo: '',
				total: '',
				page: 1,
				lastPage: '',
				user_id: "",
				parent_id: "",
			}
		},
		methods: {
			// 头部导航切换
			changeTab(item, id) {
				this.flag = 0
				this.className = item
				this.fenleiId = id
				this.page = 1
				// console.log(this.flag)
				// console.log(this.page)
				console.log(this.className, this.fenleiId)
				getApp().globalData.calssFiyId = id
				getApp().globalData.Name = item
				this.cateList = []
				this.getClassiFyList()
			},
			// 获取页面信息
			getClassiFyList() {
				console.log(this.fenleiId)
				this.$http.post('/api/applet/case_list', {
					type: this.fenleiId,
					page: this.page
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.tabList = res.data.catalog
						let newArr = res.data.list.data
						getApp().globalData.casePage = ''
						// if (this.flag == 1) {
						// 	newArr = []
						// }
						
						this.cateList = [...this.cateList, ...newArr]
						var newCateList= []
						this.cateList.forEach(item => {
							var check = newCateList.every((b) => {
								return item.id !== b.id;
							})
							check ? newCateList.push(item) : '';
						})
						this.cateList = newCateList
						console.log(this.cateList)
						this.total = res.data.list.total
						this.lastPage = res.data.list.last_page
						this.flag = 1
					}
				})
			},
			// 跳转案例详情
			goDetil(id, title) {
				if (this.page > this.lastPage) {
					this.page = this.page - 1
				}
				uni.navigateTo({
					url: `/pages/case/caseDetail?id=${id}&title=${title}&fenleiId=${this.fenleiId}&className=${this.className}&page=${this.page}`
				})
				// if (uni.getStorageSync("user_id")) {
					
				// } else {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '您还没有登录',
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				uni.switchTab({
				// 					url: '/pages/index/me'
				// 				})
				// 			} else if (res.cancel) {}
				// 		}
				// 	});
				// }
			},
			// 
			getstate() {
				// console.log("this.user_id", this.user_id)
				this.$http.post('/api/applet/get_sales_state', {
					user_id: this.user_id
				}).then(res => {
					// console.log(Number(res.data))
					if (Number(res.data) > 0) {
						this.parent_id = this.user_id
					} else {
						this.parent_id = 0
					}
				})
			},
			getSwiperImg() {
				this.$http.post('/api/applet/index').then(res => {
					if (res.code == 1) {
						this.fenleiId = res.data.case_catalog[0].id
						this.getClassiFyList()
					}
				})
			},
		},
		onShareAppMessage(res) {
			// console.log(res, this.parent_id)
			let path = '/pages/case/case?parent_id=' + this.parent_id 
			// console.log(path)
			return {
				title: '服务平台',
				path
			}
		},
		onShow() {
			// #ifdef MP-BAIDU  
			swan.setPageInfo({
				title: "案例",
				keywords: "",
				description: "案例"
			})
			// #endif 
			if (uni.getStorageSync("user_id")) {
				this.user_id = uni.getStorageSync("user_id")
				this.getstate()
			}
			// console.log(this.page)
			this.className = getApp().globalData.Name
			const page = getApp().globalData.casePage
			if (page) {
				this.page = page
				this.flag = 0
				// console.log(page)
			}
			const type = getApp().globalData.type
			this.fenleiId = type
			if (getApp().globalData.calssFiyId) {
				this.fenleiId = getApp().globalData.calssFiyId
				// console.log(this.fenleiId)
				this.cateList = []
			}
			this.getSwiperImg()
			console.log('onshow',this.fenleiId)
			// this.getClassiFyList()
		},
		onLoad(options) {
			uni.hideTabBar()
			this.getSwiperImg()
			// console.log('getApp().globalData.user_id', getApp().globalData.user_id)
			// console.log("options", options)
			if (getApp().globalData.parent_id == undefined) {
				// console.log("options", options.parent_id, options.fenleiId)
				if (options.parent_id) {
					this.parent_id = options.parent_id
				} else {
					this.parent_id = 0
				}
			} else {
				this.parent_id = getApp().globalData.parent_id
			}

			if (uni.getStorageSync("user_id")) {
				this.user_id = uni.getStorageSync("user_id")
				this.getstate()
			}
			// console.log("this.user_id", this.user_id)
			// this.getClassiFyList()
		},
		onReachBottom() {
			if (this.page > this.lastPage) {
				this.btm = true
				uni.showToast({
					title: '没有更多数据！',
					icon: 'none'
				})
				return
			}
			this.page++
			this.$http.post('/api/applet/case_list', {
				type: this.fenleiId,
				page: this.page
			}).then(res => {
				// console.log(res)
				const newARR = res.data.list.data
				this.cateList = [...this.cateList, ...newARR]
				getApp().globalData.cateList = this.cateList
			})
		},
		onHide() {
			// console.log(this.page)
			// getApp().globalData.calssFiyId = ''
			// this.flag = 0
		}
	}
	// }
</script>

<style lang="scss" scoped>
	.active {
		// padding: 0 20upx;
		box-sizing: border-box;
		background-color: #5B81F1;
		color: #fff;
		border-radius: 10upx 10upx 0px 0px;
	}

	.bottom {
		font-size: 30upx;
		color: #999;
		text-align: center;
		// margin: 20upx 0;
		margin-top: 20upx;
		margin-bottom: 10upx;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.container {
		background-color: #F8F8F8;
		height: 100vh;
		padding-right: 10upx;
		box-sizing: border-box;

		.none {
			font-size: 40upx;
			// font-weight: 700;
			color: #999;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%);
		}

		.row {
			width: 100%;
			display: flex;
			// justify-content: space-around;
			align-items: center;
			// padding: 0 20upx;
			// box-sizing: border-box;
			// background-color: red;

			.tab {
				height: 70upx;
				line-height: 70upx;
				background-color: #fff;
				border-radius: 10upx;
				text-align: center;
				font-size: 30upx;
				color: #333;
				margin: 0 10upx;
				margin-top: 15upx;


				view {
					width: 130px;
					// margin-right: 20upx;
					// padding: 0 20upx;
					// box-sizing: border-box;
				}
			}
		}

		.content {
			background-color: #F8F8F8 !important;
			padding: 0 30upx;
			box-sizing: border-box;
			padding-bottom: 30upx;

			.swiper {
				height: 100vh;
			}

			.top {
				display: flex;
				align-items: center;
				margin: 30upx 0;

				.left {
					image {
						width: 120upx;
						height: 120upx;
						border-radius: 50%;
						margin-right: 30upx;
					}
				}

				.right {
					.name {
						font-size: 30upx;
						color: #333;
						// font-weight: 600;
					}

					.time {
						font-size: 26upx;
						color: #999;
						margin-top: 20upx;
					}
				}
			}

			.al {
				width: 100%;
				height: 547upx;
			}
		}
	}
</style>
